<template>
  <div class="source-list-wrapper">
    <ul class="sources">
      <li v-for="source in sources" :key="source.id">
        <source-card :source="source" class="source-card"></source-card>
      </li>
    </ul>
    <loading-card
      class="loading-card"
      ref="loading"
      :nomore="nomore"
    ></loading-card>
  </div>
</template>

<script lang="ts" setup>
import SourceCard from './BaseCom/PublishedSourceCard.vue'
import LoadingCard from '@c/utils/LoadingCard2.vue'
import { ref } from 'vue'

let nomore = ref(false)

const props = defineProps<{
  sources: App.Source[]
}>()

// TODO: Scrollload
// export default {
//   mounted() {
//     this.$scrollLoad({
//       loadingComponent: this.$refs.loading.$el,
//       callback: (entries) => {
//         let entry = entries[0]
//         if (entry.isIntersecting) {
//           let bl = this.sources.length
//           this.$emit('fetchSourceAbstracts')
//           setTimeout(() => {
//             let al = this.sources.length
//
//             if (al - bl < 10) {
//               this.nomore = true
//             } else {
//               this.nomore = false
//             }
//           }, 1000)
//         }
//       },
//     })
//   },
// }
</script>

<style scoped lang="scss">
$w: var(--sourceListWidth);

.source-list-wrapper {
  width: $w;
  background-color: white;
  border-radius: 3px;

  .category {
    --itemListHeight: 50px;
    --itemListWidth: calc($w * 0.6);
    --itemNum: 3;
  }

  .sources > li {
    border-bottom: 1px solid var(--light);

    .source-card {
      --sourceCardWidth: 100%;
      --sourceCardHeight: 150px;
    }
  }

  .loading-card {
    --loadingCardWidth: $w;
    --loadingCardHeight: 200px;
  }
}
</style>
